<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<table id="userTable" lay-filter="test"></table>
<
<script type="text/html" id="barDemo1">
    <input class="layui-input" id="number">
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add">增加</a>
</script>
<div>
    <label class="layui-form-label">查询采购信息</label>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>

        <input id="name" type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
               class="layui-input">

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类别</label>
        <input id="paras" type="text" name="paras" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
               class="layui-input">
    </div>
    <button id="btn2" class="layui-btn">查询</button>
</div>
</body>
<script src="../layui/layui.js"></script>
<script>
    //Demo
    layui.use(['table', 'jquery', 'form'], function () {
        var table = layui.table;
        let $ = layui.$;
        let form = layui.form;


        //第一个实例
        table.render({
            id: 'goods',
            elem: '#userTable'
            , url: '/ssm/market/goods' //数据接口
            // ,page: true //开启分页
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "count": res.length, //解析数据
                    "data": res
                };
            }
            , cols: [[ //表头
                {field: 'gname', title: '商品名称'}
                , {field: 'gfactory', title: '厂家', sort: true}
                , {field: 'gsole', title: '建议销售价'}
                , {fixed: 'right', align: 'center', toolbar: '#barDemo1', title: '增加商品数量'}
                , {fixed: 'right', align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });
        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'add') { //编辑
                let number = document.getElementById("number").value;
                $.ajax({
                    type: "GET",
                    url: "/ssm/market/add?id=" + data.gid + "&number=" + number + "",
                    dataType: "json",
                    success: function (objs) {

                    }
                });
                //同步更新缓存对应的值
                obj.update({});
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

        let btn2 = document.getElementById("btn2");
        btn2.onclick = function (e) {
            let elementById = document.getElementById("name").value;
            let elementById1 = document.getElementById("paras").value;
            console.log(elementById1, elementById)
            table.reload('goods', {
                url: '/ssm/market/look'
                , where: {
                    'name':elementById,
                    'kind':elementById1
                } //设定异步数据接口的额外参数
                //,height: 300
            });

        }
    });
</script>
</html>